<template>
  <div class="modal-overlay" v-if="visible" @click.self="closeModal">
    <div class="modal-container">
      <div class="modal-header">
        <h3>选择文章标签</h3>
        <button class="close-btn" @click="closeModal">&times;</button>
      </div>

      <div class="modal-content">
        <div class="tags-container">
          <div 
            class="tag-item" 
            v-for="tag in tagList" 
            :key="tag.id"
            :class="{ 'selected': selectedTags.includes(tag.id) }"
            @click="toggleTag(tag.id)"
          >
            <span class="tag-checkbox">
              <span class="checkmark" v-if="selectedTags.includes(tag.id)">✓</span>
            </span>
            <span class="tag-name">{{ tag.tname }}</span>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <div class="footer-right">
          <button class="cancel-btn" @click="closeModal">取消</button>
          <button class="confirm-btn" @click="confirmSelection">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';
import { getAllTag } from '@/api/BlogVisit';
import { getTagByArt } from '@/api/BlogVisit';
import { setArticleTag } from '@/api/BlogUser';
import server from '@/api/server';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  currentArticleId: {
    type: Number,
    default: 0
  }
});

// 标签列表和已选标签分开存储
const tagList = ref([{
  id: 1,
  tname: "hahah"
}]);
const selectedTags = ref([ 1, 2, 3 ]);

// 监听visible变化
watch(() => props.visible, (newVal) => {
  if (newVal) {
    getTagList();
  }
});

// 获取标签列表
const getTagList = async () => {
  const params = {
    articleId: props.currentArticleId
  }
  try {
    const res = await getAllTag();
    const rrr = await getTagByArt(params);

    if(res.data.code === 0) {
      tagList.value = res.data.data;
    } else {
      console.error("获取失败：" + res.data.msg);
    }
    if(rrr.data.code === 0) {
      selectedTags.value = rrr.data.data
    } else {
      console.error("获取失败：" + rrr.data.msg);
    }
  } catch (error) {
    console.error("获取失败：" + error);
  }
};

// 确认选择
const confirmSelection = () => {
  let list = [];
  selectedTags.value.forEach((i)=>{
    list.push(i);
  })
  const params = {
    'articleId': props.currentArticleId,
    selectTagId: list
  }
  console.log(params);

  try {
    setArticleTag(server.token, params).then((res)=>{
      if(res.data.code === 0 ){
        alert("设置成功：" + res.data.data);
        emit('tags-selected', [...selectedTags.value]);
        closeModal();
      }else{
        alert("设置失败：" + res.data.msg);
      }
    })
  } catch (error) {
        alert("设置失败：" + error);
  }
};




const emit = defineEmits(['update:visible', 'tags-selected']);

// 切换标签选择状态
const toggleTag = (tagId) => {
  const index = selectedTags.value.indexOf(tagId);
  if (index === -1) {
    selectedTags.value.push(tagId);
  } else {
    selectedTags.value.splice(index, 1);
  }
};



// 关闭模态框
const closeModal = () => {
  emit('update:visible', false);
};


</script>

<style scoped>
/* 保持原有样式不变 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  max-height: 80vh;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
}

.close-btn:hover {
  color: #666;
}

.modal-content {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tag-item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: #f9f9f9;
}

.tag-item:hover {
  background-color: #f0f0f0;
}

.tag-item.selected {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.tag-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  margin-right: 8px;
  background-color: white;
}

.tag-item.selected .tag-checkbox {
  background-color: #1890ff;
  border-color: #1890ff;
  color: white;
}

.checkmark {
  font-size: 12px;
  line-height: 1;
}

.tag-name {
  margin-right: 4px;
}

.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-right {
  display: flex;
  gap: 8px;
}

.cancel-btn, .confirm-btn {
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-btn {
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  color: #666;
}

.cancel-btn:hover {
  background-color: #eaeaea;
}

.confirm-btn {
  background-color: #1890ff;
  border: 1px solid #1890ff;
  color: white;
}

.confirm-btn:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}
</style>